<template>
	<m-page :pageData="pageData" mPadding="" v-if="!isAjax">
		<view slot="content">
			<view class="team">
				<view class="team-open tac" v-if="!teamData.show">
					<!-- <view class="team-open-item">
						<view class="fz18 fwb ">团队是什么</view>
						<view class="fz14 mt20">团队是指您与您的好友以团队形式在宅小职平台上进行任务，除基础工资外，还可以获得额外工资。</view>
					</view>
					<view class="team-open-item">
						<view class="fz18 fwb ">创建团队的好处</view>
						<view class="fz14 mt20">创建团队成为团长后，您邀请的所有团员每次完成宅小职任意项目任务拿到工资时，您还可以拿到一份额外的工资，最高比例为基础工资的20</view>
					</view>
					<view class="team-open-item">
						<view class="fz18 fwb ">成立团队的条件</view>
						<view class="fz14 mt20">
							团队至少由2人组成，包含自己在内，2人即可成为一级团队，团队等级越高，团长额外工资越高，详细团队等级要求与提成收益如下
							<view class="c26 mt10">
								团队等级要求与提成比例说明
							</view>
						</view>
					</view>
					<view class="team-open-item">
						<view class="fz18 fwb ">团队提成案例说明</view>
						<view class="fz18 fwb mt20">题</view>
						<view class="fz14">
							<view class="mt10">团长小王与好友小蓝，好友小青，好友小黄组成了4人小团队。</view>
							<view class="mt10">小王的团队等级是4级，所有项目提成比例都为4%，3个团员分别做了3个项目任务。</view>
							<view class="mt10">本月小蓝做了问卷调研拿到了1000元。</view>
							<view class="mt10">小青做了内容编辑，拿到了2000元。</view>
							<view class="mt10">小黄做了百科问答拿到3000元。</view>
							<view class="mt10">那么团长小王的额外工资是多少？</view>
						</view>
						<view class="fz18 fwb mt20">答</view>
						<view class="fz14">
							<view class="mt10">团员好友小蓝做问卷调研团长小王可以拿到的额外工资=1000*4%=40元</view>
							<view class="mt10">团员好友小青做内容编辑团长小王可以拿到的额外工资=2000*4%=80元</view>
							<view class="mt10">团员好友小黄做百科问答团长小王可以拿到的额外工资=3000*4%=120元</view>
							<view class="mt10">团长小王最终可以拿到的额外工资=40+80+120=240元</view>
						</view>
						<view class="fz18 fwb mt20">小提示</view>
						<view class="fz14 mt10">团队人数越多，团队等级越高，</view>
						<view class="fz14 mt10">团长可以拿到的额外工资比例越高；团员做的越多，工资也更高，</view>
						<view class="fz14 mt10">假设案例里是20级团，这4个同学做的任务就可以给团长小王提供1200元额外工资了。</view>
						
					</view> -->
					<jyf-parser :html="content" ref="article "></jyf-parser>
					<view class="team-open-item">
						<view class="fz14">
							<view style="margin-bottom: 12px;">我的芝草：{{this.loginInfo.balance}} </view>
							<view>（历史获得芝草大于<text class="cff3">{{aggreeData.historyNumber}}</text>后开启团队创建权限）</view>
						</view>
						
					</view>
					<view class="team-open-item">
						<view class="fz14">
							<view>需要消耗芝草：{{aggreeData.xiaohao}} </view>
						</view>
						<view class="mt10">
							<m-button @clickBtn="sureTeam.show = true" :disabled="!aggreeDiy.isAgree.length" width="232px" borderRadius="4px" height="36px">消耗芝草创建团队</m-button>
						</view>
						<view class="mt30 ">
							<!-- 我已阅读接受团队<text class="cff3">创建协议</text> -->
							<m-agree :diy="aggreeDiy" @changeAgree="changeAgree"></m-agree>
						</view>
					</view>
					
				</view>
				<view class="team-detail" v-else>
					<view class="team-detail-title fwb" v-if="!isMobile">
						团队信息
					</view>
					<view class="team-detail-content ">
						<view v-if="isMobile" style="background: #f7faff;position: absolute; height: 210px;z-index: 0;" class="posa">  </view>
						<view class="team-detail-content team-detail-content-box posr" :style="{position: 'relative','z-index': 1,margin: isMobile?'5px 0 20px 0':'', 'background-color':'#fff'}">
							<view class="team-detail-content-item">
									<view class="team-detail-content-item-label">
										团长：
									</view>
									<view class="team-detail-content-item-value">
										{{teamData.data.nick_name}}
									</view>
								</view>
								<view class="team-detail-content-item">
									<view class="team-detail-content-item-label">
										团队编号：
									</view>
									<view class="team-detail-content-item-value">
										{{teamData.data.team_number}}
									</view>
								</view>
								<view class="team-detail-content-item team-detail-content-item2">
									<view class="team-detail-content-item-label">
										本月团队等级：
									</view>
									<view class="team-detail-content-item-value">
										{{teamData.data.level}}级（{{new Date().getMonth()< 1?12: new Date().getMonth()}}月：{{teamData.data.last_month_level || 0}}级）  
										
										<view class="flex-start-nowrap cup" @click="goArticle({id:'ZXZ_TEAM_PROFILE_SETTLEMENT_RULE',title:'结算规则'})">
											<text  class="c26 mr10">结算规则</text>
											<u-icon class="" 
											 name="info-circle" color="#26bbff"></u-icon>
										</view>
									</view>
								</view>
								<view class="team-detail-content-item team-detail-content-item3">
									<view class="team-detail-content-item-label">
										团长社群：
									</view>
									<view class="team-detail-content-item-value">
										<text class="c26 cup" @click="goArticle({id:'ZXZ_TEAM_LEADER_GROUP',title:'团长社群'})">点击加入团长社群</text> 
									</view>
								</view>
						</view>
						<u-line class="mb30" v-if="!isMobile"></u-line>
						<view class="team-detail-content-item team-detail-content-item4 team-detail-content-item-100" :style="{marginTop:isMobile?'10px' :''}">
							<view class="team-detail-content-item-label flex-between-nowrap">
								本月邀请进度：
								<view class="progress-next flex-start-nowrap mb cup" @click="goArticle({id:'ZXZ_TEAM EFFECTIVE NUMBER',title:'有效人数定义'})">
									<text class="c26 mr10">有效人数定义</text>
									<u-icon class=""  name="info-circle" color="#26bbff"></u-icon>
								</view>
							</view>
							<view class="team-detail-content-item-value team-detail-content-item-value-100">
								<view class="progress-box flex-start-nowrap">
									<view class="progress">
										<view class="progress-progress" :style="{width:(teamData.data.progress>100?100:teamData.data.progress) +'%'}">
										</view>
										<view class="progress-value">
											{{teamData.data.now_invite_progress}}
										</view>
									</view>
									<view class="progress-next flex-start-nowrap pc cup" @click="goArticle({id:'ZXZ_TEAM EFFECTIVE NUMBER',title:'有效人数定义'})">
										<text class="c26 mr10">有效人数定义</text>
										<u-icon class=""  name="info-circle" color="#26bbff"></u-icon>
									</view>
								</view>
								<view class="mt10 c999 progress-text">
									本月总邀请人数{{teamData.data.now_invite_people}}人，有效人数{{teamData.data.team_people}}人，距离下一级还差{{(teamData.data.hasPeopleNumber - teamData.data.team_people).toFixed(0)}}有效人数
								</view>
							</view>
						</view>
						<view class="team-detail-content-item team-detail-content-item5 team-detail-content-item-100">
							<view class="team-detail-content-item-label">
								我的专属邀请链接：
							</view>
							<view class="team-detail-content-item-value team-detail-content-item-value-100" >
								<view :class="['c26 cup ',isMobile?'fz14 flex-between-nowrap':'mr10'] " :style="{'margin-bottom':'6px',padding:isMobile?'5px 0 0 0':'',width:'100%'}">{{ inviteUrls + teamData.data.url}}<u-icon style="display: inline-block;margin-left: 20rpx;"  class="cup" @click="copyUrl"  size="16" name="/static/images/setting/copy.png"></u-icon></view> 
								<text class="c999 ">复制链接邀请好友注册宅小职并加入您的团队</text>
							</view>
						</view>
						<u-line class="mb30" v-if="!isMobile"></u-line>
					</view>
					<view :class="['team-detail-content-item team-detail-content-item3',isMobile?'team-detail-content-itembg alic':'']">
						<view class="team-detail-content-item-label">
							本月团队累计总收入：
						</view>
						<view :class="['team-detail-content-item-value',isMobile?'flex-center flexdc':'']" :style="{paddingRight:isMobile?'15px':'0'}">
							{{teamData.data.sum_amount || 0}}芝草
							<text :style="{fontSize:isMobile?'12px':'16px'}">
								（每日凌晨0点更新）
							</text>
						</view>
					</view>
					<!-- <view class="team-detail-title">
						本月团队累计总收入：{{teamData.data.sum_amount || 0}}芝草（每日凌晨3点更新）
					</view> -->
					<view class="team-table flex-center flexdc">
						<u-tabs :list="tabLeft.list"
						 v-if="isMobile"
						 :current="tabLeft.index"
						 :itemStyle="{
							  height:'62px',
							  fontSize:'18px',
							  width:'100%'
						 }"
						 :activeStyle="{
							  background: 'none',
							  fontWeight: 'bold',
							  width: '100%',
							  height: '100%',
							  textAlign:'center',
							  lineHeight: '62px',
						 }"
						 @click="changeTabMobile"></u-tabs>
						<view class="team-top-tab flex-start-nowrap alic" v-if="!isMobile">
							<view :class="['team-top-tab-item team-top-tab-item-left plr38 cup',tabLeft.index == index && 'active']" 
							@click="changeTab(item,index)"
							v-for="(item,index) in tabLeft.list" :key="index">
								{{item.name}}
							</view>
						</view>
						<view class="team-list">
							<view class="team-list-table ">
								<view class="flex-between-nowrap team-list-table-tr" v-for="(item,index) in teamData.list" :key="index">
									<template v-if="index == 0">
										<view class="team-list-table-td">{{item.real_name || item.nick_name}}(团长)</view>
										<view class="team-list-table-td">
										{{item.amount || 0}}芝草
										<u-icon class="cup ml5" name="info-circle" @click="showMoneyDetail(item)" color="#26bbff"></u-icon>
											<!-- <view class="">
												 {{item.amount == item.source?'':'('+item.source+')'}}
											</view> -->
										</view>
									</template>
									<template v-else>
										<view class="team-list-table-td">{{item.real_name || item.nick_name}}</view>
										<view class="team-list-table-td">{{item.amount|| 0}}芝草</view>
									</template>
								</view>
							</view>
							<view class="pd30" v-if="page.total > page.page_size">
								<page-pagination @change="goPage" :total="page.total" :pageSize="page.page_size" :showAround="true"></page-pagination>
							</view>
							<u-empty
								:class="['m-income-empty']"
								v-if="!teamData.list.length"
								icon="/static/images/projectDetail/no-data.png"
								text="数据暂未更新，请等待更新后再来"
								size="100" >
							</u-empty>
						</view>
					</view>
				</view>
			</view>
			<m-popup :show="popup.show" :title="popup.title" :footer="popup.footer" @close="closeDetail">
				<view class="popup-detail flex-center" v-html="popup.text" style="min-height: 100px;">
				</view>
			</m-popup>
			<u-modal
			:show="sureTeam.show" 
			title="提示"
			:content="sureTeam.title"
			:showCancelButton="true"
			@cancel="sureTeam.show = false"
			@confirm="createTeam" ></u-modal>
		</view>
	</m-page>
</template>

<script>
	import jyfParser from '@/components/jyf-parser/jyf-parser'
	import { dateFormat } from '../../utils';
	export default {
		data() {
			return {
				pageData:{
					showBrand:false,
					showTips:true,
					title:'创建团队',
					diy:true,
					t:true,
				},
				aggreeData:{
					historyNumber:0,
					xiaohao:0,
				},
				aggreeDiy:{
					text:'我已阅读接受团队',
					btn:'创建协议',
					title:'宅小职创建团队协议',
					id:'ZXZ_TEAM_PROFILE_AGREEMENT',
					cmd:'teamProfile',
					isAgree:[],
				},
				tabLeft:{
					index:0,
					list:[
					]
				},
				
				sureTeam:{
					title:'是否消耗芝草创建团队？',
					show:false
				},
				popup:{
					show:false,
					text:'',
					footer:false,
					list:[],
					js:{
						title:'结算规则',
						code:'ZXZ_TEAM_PROFILE_SETTLEMENT_RULE'
					},
					yx:{
						title:'结算规则',
						code:'ZXZ_TEAM_PROFILE_SETTLEMENT_RULE'
					},
				},
				isAjax:true,
				teamData:{
					show:false,
					data:{},
					list:[],
				},
				inviteUrls:'',
				content:'',
				page:{
					total:1,
					page:1,
					page_size:30,
					item:{},
				}
				
			};
		},
		onLoad() {
			this.isAjax = true;
			this.teamProfile()
			this.teamInfo()
			this.getByDictCode()
			this.$nextTick(()=>{
				if(this.isMobile){
					this.pageData.titleClass = 'disn'
				}
			})
			
		},
		methods:{
			showMoneyDetail(item){
				debugger
				this.popup.text = ''
				if(item.source){
					item.source.split('+').map((item,i) => {
						if(i == 0){
							this.popup.text +='自己做任务获得芝草：'+ item +'<br /><br />'
						}
						if(i == 1){
							this.popup.text +='团长奖励芝草：'+ item
						}
					})
				}else{
					this.popup.text +='自己做任务获得芝草：0<br /><br />'
					this.popup.text +='团长奖励芝草：0'
				}
				// this.popup.text =item.source? item.source.replace('+','<br/>') : '0'
				
				this.popup.title = '芝草收益说明'
				this.popup.show = true;
			},
			getByDictCode(){
				this.$api.getByDictCode({dict_code:'ZXZ_TEAM_CREATE_EXPLANATION'}).then(res => {
					if(res.code == 200){
						this.content = res.data.dict_value
					}
				})
			},
			copyUrl(){
				uni.setClipboardData({
					data:this.inviteUrls +  this.teamData.data.url,
					success: () =>
						uni.showToast({
							icon:'none',
							title: '复制成功'
						})
				})
			},
			changeTabMobile(e){
				this.tabLeft.index = e.index
				this.tabLeftItem = e
				this.teamIncomeDetailList(e)
				// this.getPageList()
			},
			changeTab(item,index){
				this.tabLeft.index = index
				this.teamIncomeDetailList(item)
			},
			changeAgree(val){
				this.aggreeDiy.isAgree = val
			},
			createTeam(){
				this.$api.createTeam({userId:this.loginInfo.user_id}).then(res => {
					if(res.code == 200){
						this.sureTeam.show = false;
						this.teamInfo()
					}else{
						uni.showToast({
							title:res.message,
							icon:'none'
						})
					}
				})
				
			},
			closeDetail(){
				this.popup.show = false
			},
			showPopup(type){
				if(type){
					this.popup.list.some(item => {
						if(item.dict_code == this.popup[type].code){
							this.popup.text = item.dict_value
							this.popup.title = this.popup[type].title
							return true
						}
					})
					this.popup.show  = true;
				}
			},
			inviteUrl(){
				let _this = this;
				this.$api.inviteUrl().then(res => {
					if(res.code == 200){
						_this.inviteUrls = res.data.dict_value;
					}
				})
			},
			teamInfo(){
				this.$api.teamInfo({user_id:this.loginInfo.user_id}).then(res => {
					if(res.code == 200 && res.data.team_number){
						this.teamData.show = true;
						this.pageData.title = '我的团队'
						res.data.url =  res.data.team_number
						res.data.hasPeopleNumber = 0
						res.data.progress = 0
						res.data.sum_amount = 0
						this.teamData.data = res.data
						let obj ={
							name:'',
							cmd:'teamIncomeDetailList',
						}
						
						this.tabLeft.list = [
							{
								...obj,
								name:dateFormat(res.data.now_month+'-01','yyyy-M')  +( this.isMobile?'明细':'')
							},
							{
								...obj,
								name:new Date().getFullYear() + '-' + ( new Date().getMonth()< 1?12: new Date().getMonth()) + (this.isMobile?'明细':'')
							}
						]
						this.teamLevelSetting()
						this.teamSumIncomeThisMonth()
						this.teamIncomeDetailList()
						this.inviteUrl()
					}
					this.isAjax = false
				})
				
			},
			goPage(e){
				this.page.page = e;
				this.teamData.list = []
				this.teamIncomeDetailList(this.page.item,true)
			},
			teamSumIncomeThisMonth(){
				this.$api.teamSumIncomeThisMonth({
					team_number:this.teamData.data.team_number
				}).then(res => {
					if(res.code == 200){
						this.teamData.data.sum_amount = parseFloat(res.data.sum_amount)
					}
				})
				
			},
			teamIncomeDetailList(item,isPage){
				if(!isPage){
					this.page.page = 1;
				}
				this.page.item = item
				this.$api.teamIncomeDetailList({
					year_month: dateFormat((item ?item.name.replace(/明细/,''): this.teamData.data.now_month),'yyyy-MM'),
					team_number:this.teamData.data.team_number,
					page:this.page.page,
					page_size:this.page.page_size
				}).then(res => {
					if(res.code == 200){
						res.data.list.map(item => {
							item.amount = parseFloat(item.amount)
						})
						this.page.total = res.data.count
						this.teamData.list = res.data.list
					}
				})
				
			},
			teamProfile(){
				this.$api.teamProfile().then(res => {
					if(res.code == 200){
						res.data.map(item => {
							if(item.dict_code == 'ZXZ_TEAM_PROFILE_CREATE'){
								this.aggreeData.historyNumber = item.dict_number
								
							}else if(item.dict_code == 'ZXZ_TEAM_PROFILE_CREATE_CONSUME'){
								this.aggreeData.xiaohao = item.dict_number
								
							}
						})
						this.popup.list = res.data;
					}
				})
				
			},
			teamLevelSetting(){
				debugger
				this.$api.teamLevelSetting().then(res => {
					if(res.code == 200){
						let datas = this.teamData.data 
						let lastItem =res.data[res.data.length - 1]
						res.data.some(item => {
							if(item.dict_value * 1  == datas.level + 1){
								this.teamData.data.hasPeopleNumber = item.dict_number
								this.teamData.data.progress =  datas.team_people / item.dict_number  * 100
								this.$nextTick()
								return true
							}
							
						})
						if(datas.level == lastItem.dict_value){
							this.teamData.data.hasPeopleNumber = datas.team_people
							this.teamData.data.progress =  datas.team_people / lastItem.dict_number  * 100
							this.teamData.data.now_invite_progress = datas.team_people + '/' +lastItem.dict_number
						}
					}
				})
				
			},
		}
	}
</script>

<style lang="scss">
	.fz18{
		font-size: 18px;
	}
	.fwb{
		font-weight: bold;
	}
	.mt30{
		margin-top: 20px;
	}
	.mt20{
		margin-top: 20px;
	}
	.mt10{
		margin-top: 10px;
	}
	.ml5{
		margin-left: 5px;
	}
	.mb30{
		margin-bottom: 30px!important;
	}
	.mr10{
		margin-right: 5px;
	}
	.team{
		&-table{
			width: 618px;
			// width: calc(100% - 145px);
			margin: 0 auto;
			margin-left: 163px;
		}
		&-open{
			&-item{
				margin-bottom: 48px;
			}
		}
		.mb{
			display: none;
		}
		.pc{
			display: flex;
		}
		&-top{
			&-tab{
				border: 1px solid #EEF1F5;
				border-radius: 2px;
				width: 100%;
				&-item{
					height: 100%;
					width: 50%;
					padding: 10px 0;
					text-align: center;
					
					
				}
				&-item:not(:last-child){
					border-right: 1px solid #EEF1F5;
				}
				.active{
					background: #26bbff;
					color:#fff;
				}
			}
		}
		&-list{
			padding: 10px 25px;
			width: 100%;
			&-time{
				padding-bottom: 48px;
			}
			&-table{
				width: 100%;
				line-height: 50px;
				border-top: 1px solid #EEF1F5;
				border-left: 1px solid #EEF1F5;
				&-tr{
					
				}
				&-td{
					@extend .flex-center;
					width: 50%;
					text-align: center;
					border-right: 1px solid #EEF1F5;
					border-bottom: 1px solid #EEF1F5;
					word-break: break-all;
				}
			}
		}
		&-detail{
			padding: 33px 25px 53px;
			&-title{
				margin-bottom: 18px;
			}
			
			&-content{
				@extend .flex-start-wrap;
				&-item{
					width: 50%;
					@extend .mb30;
					@extend .flex-start-nowrap;
					position: relative;
					z-index: 11;
					background: #FFF;
					&-label{
						width: 163px;
						text-align: right;
						justify-content: flex-end;
					}
					&-value{
						width:calc(100% - 165px);
						@extend .flex-start-nowrap;
					}
					&-value-100{
						width: calc(100% - 165px);
						flex-wrap: wrap;
					}
					
				}
				&-item-100{
					width: 100%;
				}
				
			}
			.progress-box{
				width:100%;
			}
			.progress{
				width: calc(100% - 145px);;
				margin-right: 20px;
				height: 20px;
				border: 1px solid #EAEAEA;
				position: relative;
				&-progress{
					height: 100%;
					background: #26bbff;
				
				}
				&-value{
					@extend .posa;
					right: 5px;
					top: 0px;
					left: auto;
				}
			}
		}
	}
	
	@media screen and (min-width: 0px) and (max-width:1024px){
		
		.team{
			/deep/ .u-tabs{
				width: 100%;
				.u-tabs__wrapper__nav__item__text{
					font-size: inherit;
				}
			}
			&-table{
				width: 100%;
				margin: 0 auto;
			}
			&-list{
				padding: 0px 25px;
			}
			.pc{
				display: none;
			}
			.mb{
				display: flex;
			}
			&-detail{
				padding: 0px;
				&-title{
					margin-bottom: 18px;
					text-align: center;
				}
				
				&-content{
					// justify-content: space-between;
					&-box{
						box-shadow: 0px 0px 6px 0px rgba(48, 51, 59, 0.2);
						padding: 10px;
						border-radius: 10px;
						margin-bottom: 10px;
						width: 100%;
					}
					&-item{
						width: 50%;
						margin-bottom: 18px !important;
						// @extend .mb30;
						// @extend .flex-start-nowrap;
						&-label{
							width: auto;
							text-align: left;
							justify-content: space-between;
						}
						&-value{
							width:auto;
							// @extend .flex-start-nowrap;
						}
						&-value-100{
							width: 100%;
							flex-wrap: wrap;
							word-break: break-all;
							
						}
						
					}
					&-item2{
						width: 100%;
						.team-detail-content-item-value{
							justify-content: space-between;
							width:calc(100% - 113px);
						}
					}
					&-item:nth-child(2n){
						justify-content: flex-end;
					}
					&-item3{
						width: 100%;
						justify-content: space-between!important;
					}
					&-item4{
						width: 100%;
						flex-direction: column;
					}
					&-item5{
						width: 100%;
						flex-direction: column;
						font-size: 14px;
						.team-detail-content-item-value{
							justify-content: space-between;
						}
					}
					&-item-100{
						padding: 0 10px
					}
					
					&-itembg{
						background: #f7faff;
						padding: 20rpx 0px;
						width: calc(100%);
						margin-left: -10px;
						padding-left: 20px;
						
					}
				}
			
			}
			.progress-box{
				margin: 10px 0 5px 0;
			}
			.progress{
				width: 100%;
				margin-right: 0;
				&-text{
					font-size: 14px;
				}
			
			}
		}
	}
</style>
